/* Dark Theme Variables */
:root.dark {
  /* 基础颜色 - 更深的背景和更高的对比度 */
  --background-color: #121212;
  --surface-color: #1e1e1e;
  --border-color: #333333;
  --text-color: #ffffff;
  --text-secondary: #cccccc;
  --text-muted: #999999;
  
  /* 主要颜色 */
  --primary-color: #42b883;
  --primary-light: #4fc08d;
  --primary-dark: #369870;
  
  /* 状态颜色 */
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --info-color: #409eff;
  
  /* 阴影 */
  --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.5);
  
  /* Element Plus 覆盖 */
  --el-bg-color: #1e1e1e;
  --el-bg-color-page: #121212;
  --el-text-color-primary: #ffffff;
  --el-text-color-regular: #cccccc;
  --el-text-color-secondary: #999999;
  --el-border-color: #333333;
  --el-border-color-light: #2a2a2a;
  --el-border-color-lighter: #222222;
  --el-fill-color: #2a2a2a;
  --el-fill-color-light: #222222;
  --el-fill-color-lighter: #1a1a1a;
}

/* 深色模式基础样式 */
.dark {
  background-color: var(--background-color);
  color: var(--text-color);
}

.dark .header {
  background: linear-gradient(135deg, #369870, #1a252f);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark .footer {
  background: #2d2d2d;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-color);
}

.dark .sidebar {
  background: var(--surface-color);
  border-right: 1px solid var(--border-color);
}

.dark .content {
  background: var(--surface-color);
}

/* 文档空间组件 */
.dark .document-space {
  background: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
}

.dark .space-header {
  border-bottom: 1px solid var(--border-color);
}

.dark .space-header h3 {
  color: var(--primary-color);
}

.dark .space-selector {
  border-bottom: 1px solid var(--border-color);
}

.dark .space-select {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .space-select:focus {
  border-color: var(--primary-color);
}

.dark .space-info {
  border-bottom: 1px solid var(--border-color);
}

.dark .space-details h4 {
  color: var(--text-color);
}

.dark .space-description {
  color: var(--text-secondary);
}

.dark .space-stats {
  color: var(--text-muted);
}

/* 文档列表组件 */
.dark .document-list {
  background: var(--surface-color);
}

.dark .list-header {
  border-bottom: 1px solid var(--border-color);
}

.dark .list-header h3 {
  color: var(--primary-color);
}

/* 旧的文档树样式保持兼容 */
.dark .document-tree {
  background: var(--surface-color);
}

.dark .tree-header {
  border-bottom: 1px solid var(--border-color);
}

.dark .search-bar {
  border-bottom: 1px solid var(--border-color);
}

.dark .search-input {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .search-input:focus {
  border-color: var(--primary-color);
}

.dark .tree-footer {
  background: var(--background-color);
  border-top: 1px solid var(--border-color);
}

.dark .error-message {
  background: rgba(245, 108, 108, 0.1);
  border-bottom: 1px solid rgba(245, 108, 108, 0.3);
}

.dark .error-message p {
  color: var(--danger-color);
}

.dark .retry-btn {
  background: var(--danger-color);
}

/* 弹窗暗色主题 */
.dark .dialog {
  background: var(--surface-color);
  box-shadow: var(--shadow-heavy);
}

.dark .dialog-header {
  border-bottom: 1px solid var(--border-color);
}

.dark .dialog-header h3 {
  color: var(--text-color);
}

.dark .close-btn {
  color: var(--text-muted);
}

.dark .close-btn:hover {
  color: var(--text-secondary);
  background: var(--background-color);
}

.dark .form-group label {
  color: var(--text-color);
}

.dark .form-input {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .form-input:focus {
  border-color: var(--primary-color);
}

.dark .form-input::placeholder {
  color: var(--text-muted);
}

.dark .cancel-btn {
  background: var(--background-color);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.dark .cancel-btn:hover {
  background: var(--border-color);
}

/* 文档树节点暗色主题 */
.dark .tree-node {
  color: var(--text-color);
}

.dark .tree-node:hover {
  background: rgba(66, 184, 131, 0.1);
}

.dark .tree-node.selected {
  background: rgba(66, 184, 131, 0.2);
  border-left-color: var(--primary-color);
}

.dark .node-content {
  color: var(--text-color);
}

.dark .node-actions button {
  color: var(--text-muted);
}

.dark .node-actions button:hover {
  color: var(--text-color);
}

/* 滚动条暗色主题 */
.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark ::-webkit-scrollbar-track {
  background: var(--background-color);
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* 过渡动画 */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* 确保深色模式下选择框箭头可见 */
.dark .form-select {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M6 8L0 2l1.41-1.41L6 5.17l4.59-4.58L12 2z" fill="%23b3b3b3"/></svg>');
}

/* 按钮组件深色主题 */
.dark .create-btn, 
.dark .refresh-btn,
.dark .create-doc-btn,
.dark .view-docs-btn {
  border: 1px solid var(--border-color);
}

.dark .create-btn:hover, 
.dark .refresh-btn:hover:not(:disabled),
.dark .create-doc-btn:hover,
.dark .view-docs-btn:hover {
  background: var(--primary-dark);
}

.dark .refresh-btn:disabled {
  opacity: 0.4;
  background: var(--background-color);
  color: var(--text-muted);
}

.dark .search-input {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .search-input::placeholder {
  color: var(--text-muted);
}

/* 列表容器 */
.dark .tree-container {
  background: var(--surface-color);
}

.dark .list-footer {
  background: var(--background-color);
  border-top: 1px solid var(--border-color);
}

.dark .stats {
  color: var(--text-muted);
}

/* 空状态和加载状态 */
.dark .loading,
.dark .empty-state {
  color: var(--text-secondary);
}

/* 颜色输入框 */
.dark .color-input {
  border: 1px solid var(--border-color);
  background: var(--background-color);
}

/* DocumentDetail 组件 */
.dark .document-detail {
  background: var(--surface-color);
  color: var(--text-color);
}

.dark .no-document .placeholder {
  color: var(--text-secondary);
}

.dark .detail-header {
  border-bottom: 1px solid var(--border-color);
}

.dark .document-title {
  color: var(--text-color);
}

.dark .document-title-input {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .document-title-input:focus {
  border-color: var(--primary-color);
}

.dark .action-btn {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .action-btn:hover {
  background: var(--border-color);
}

/* 文档内容区域 */
.dark .document-content {
  background: var(--surface-color);
  color: var(--text-color);
}

.dark .content-editor {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .content-editor:focus {
  border-color: var(--primary-color);
}

.dark .raw-content {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

/* 文档子项 */
.dark .items-section {
  background: var(--surface-color);
}

.dark .item-card {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .item-title {
  color: var(--text-color);
}

.dark .item-content {
  color: var(--text-secondary);
}

.dark .item-meta {
  color: var(--text-muted);
}

.dark .meta-info {
  color: var(--text-muted);
}

/* 视图切换按钮 */
.dark .view-toggle {
  background: var(--background-color);
  border: 1px solid var(--border-color);
}

.dark .view-toggle button {
  color: var(--text-secondary);
  background: transparent;
}

.dark .view-toggle button.active {
  background: var(--primary-color);
  color: white;
}

/* 弹窗相关样式（已存在，但确保完整） */
.dark .dialog {
  background: var(--surface-color);
  color: var(--text-color);
}

.dark .form-input,
.dark .form-textarea,
.dark .form-select {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark .form-input:focus,
.dark .form-textarea:focus,
.dark .form-select:focus {
  border-color: var(--primary-color);
}

.dark .submit-btn {
  background: var(--primary-color);
  color: white;
  border: none;
}

/* Element Plus Select 深色主题 */
.dark .el-select {
  --el-select-input-color: var(--text-color);
  --el-select-input-focus-border-color: var(--primary-color);
  --el-select-input-border-color: var(--border-color);
}

.dark .el-select .el-input__inner {
  background: var(--background-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

.dark .el-select .el-input__inner:focus {
  border-color: var(--primary-color);
}

/* 空间选项样式深色主题 */
.dark .space-option {
  color: var(--text-color);
}

.dark .space-name {
  color: var(--text-color);
}

.dark .space-desc {
  color: var(--text-secondary);
}

.dark .space-count {
  background: var(--background-color);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

/* Element Plus 下拉菜单深色主题 */
.dark .el-select-dropdown {
  background: var(--surface-color);
  border-color: var(--border-color);
}

.dark .el-option {
  color: var(--text-color);
  background: var(--surface-color);
}

.dark .el-option:hover {
  background: var(--background-color);
}

.dark .el-option.is-selected {
  color: var(--primary-color);
  background: rgba(66, 184, 131, 0.1);
}

.dark .el-select .el-input.is-focus .el-input__inner {
  border-color: var(--primary-color);
}